"use client";

/**
 * /w/:workspace/search — full-text search over the workspace (TASK-0098).
 *
 * Shares ONE result model with the ⌘K dialog: `searchApi.search` (POST
 * /search → { data, nextCursor, tookMs }) + `ResultsList`/`ResultRow`
 * (components/search/results-list.tsx) — the same badges, deep links and
 * grouped layout. The inline `SearchHit`/envelope normalization from the
 * Phase-7 draft is gone: the wire shape is the shared `SearchResult`.
 *
 * States: loading, empty ("No results for …"), error, and 503
 * `SEARCH_UNAVAILABLE` → "Search is temporarily unavailable — try again."
 * Recency is recorded by the ⌘K dialog; this page keeps the input
 * shareable via `?q=` (deep link).
 */
import { Suspense, useEffect, useRef, useState } from "react";
import { useParams, useSearchParams, useRouter } from "next/navigation";
import { ArrowDownWideNarrow, Search, Loader2, ShieldAlert, SearchX, Sparkles } from "lucide-react";
import { searchApi, isApiError } from "@/lib/api";
import { useWorkspace } from "@/hooks/use-workspace";
import { SEARCH_DEBOUNCE_MS, deepLinkFor } from "@/lib/search";
import { ResultsList } from "@/components/search/results-list";
import { AskAiSearch } from "@/components/search/ask-ai-search";
import type { SearchResult } from "@/lib/types";

export default function SearchPage() {
  // `useSearchParams` needs a Suspense boundary (Next 14 build rule).
  return (
    <Suspense
      fallback={
        <div className="mx-auto max-w-2xl px-6 py-8">
          <p className="text-sm text-muted-foreground">Loading search…</p>
        </div>
      }
    >
      <SearchPageInner />
    </Suspense>
  );
}

function SearchPageInner() {
  const params = useParams<{ workspace: string }>();
  const workspaceSlug = params?.workspace ?? "";
  const { data: workspace } = useWorkspace(workspaceSlug);
  const router = useRouter();
  const searchParams = useSearchParams();

  // The shareable query: `?q=` wins on first load, then the input rules.
  const [input, setInput] = useState(() => searchParams.get("q") ?? "");
  const [q, setQ] = useState(() => (searchParams.get("q") ?? "").trim());
  // T-155: result ordering (spec §10 "relevance / creation / modification
  // date"). `relevance` is the API default (the existing `_score` path).
  const sortParam = searchParams.get("sort");
  const [sortBy, setSortBy] = useState<SortMode>(isSortMode(sortParam) ? sortParam : "relevance");
  const [hits, setHits] = useState<SearchResult[] | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<ErrorKind>(null);
  const reqRef = useRef(0);
  // The "Ask AI about this workspace" card (TASK-0125 RAG): toggled by the
  // Ask AI button; the full-page version is /w/:workspace/ask.
  const [askOpen, setAskOpen] = useState(false);
  const askRef = useRef<HTMLDivElement>(null);

  // Debounce the input → committed query (same window as the dialog).
  useEffect(() => {
    const t = setTimeout(() => setQ(input.trim()), SEARCH_DEBOUNCE_MS);
    return () => clearTimeout(t);
  }, [input]);

  useEffect(() => {
    if (!q) {
      setHits(null);
      return;
    }
    const my = (reqRef.current += 1);
    const controller = new AbortController();
    setLoading(true);
    setError(null);
    searchApi
      .search({ q, workspaceId: workspace?.id, limit: 30, sortBy }, controller.signal)
      .then((res) => {
        if (my !== reqRef.current) return;
        setHits(res.data);
      })
      .catch((e: unknown) => {
        if (my !== reqRef.current) return;
        if (e instanceof DOMException && e.name === "AbortError") return;
        setError(toErrorKind(e));
      })
      .finally(() => {
        if (my === reqRef.current) setLoading(false);
      });
    return () => controller.abort();
  }, [q, sortBy, workspace?.id]);

  // Keep `?q=` shareable without clobbering in-progress typing.
  useEffect(() => {
    const next = new URLSearchParams(searchParams.toString());
    if (q) next.set("q", q);
    else next.delete("q");
    // T-155: persist the sort only when it is not the default (clean URLs).
    if (sortBy !== "relevance") next.set("sort", sortBy);
    else next.delete("sort");
    if (next.toString() !== searchParams.toString()) {
      router.replace(`/w/${workspaceSlug}/search${next.toString() ? `?${next.toString()}` : ""}`, { scroll: false });
    }
  }, [q, sortBy, searchParams, router, workspaceSlug]);

  const slug = workspace?.slug ?? workspaceSlug;

  return (
    <div className="mx-auto max-w-2xl px-6 py-8">
      <div className="mb-4 flex items-center justify-between gap-3">
        <h1 className="text-xl font-semibold">Search</h1>
        <div className="flex items-center gap-2">
        {/* T-155 — result ordering (spec §10). Changing it re-queries with the
          *  new order; `relevance` is the default and the URL stays clean. */}
        <label className="relative inline-flex items-center" aria-label="Sort results by">
          <ArrowDownWideNarrow className="pointer-events-none absolute left-2 size-3.5 text-muted-foreground" aria-hidden />
          <select
            data-testid="search-sort"
            value={sortBy}
            onChange={(e) => setSortBy(e.target.value as SortMode)}
            className="rounded-md border border-input bg-background py-1.5 pl-7 pr-2 text-xs text-foreground/80 outline-none focus-visible:ring-1 focus-visible:ring-ring"
          >
            <option value="relevance">Relevance</option>
            <option value="createdAt">Newest</option>
            <option value="updatedAt">Recently updated</option>
          </select>
        </label>
        {/* TASK-0125 — workspace-level RAG entry: opens the "Ask AI about
         *  this workspace" card below (full-page version: /w/:workspace/ask).
         *  TASK-0122's panel entry survives on page/database views. */}
        <button
          type="button"
          data-testid="search-ask-ai"
          onClick={() => {
            setAskOpen((open) => {
              const next = !open;
              if (next) requestAnimationFrame(() => askRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }));
              return next;
            });
          }}
          aria-expanded={askOpen}
          className="inline-flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1.5 text-xs text-foreground/80 hover:bg-accent hover:text-foreground"
        >
          <Sparkles className="size-3.5" aria-hidden />
          Ask AI
        </button>
        </div>
      </div>
      <div className="relative">
        <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" aria-hidden />
        <input
          autoFocus
          className="w-full rounded-md border border-input bg-background py-2.5 pl-9 pr-3 text-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
          placeholder="Search pages, databases, records, comments, files…"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          aria-label="Search"
        />
      </div>

      {/* TASK-0125 — the "Ask AI about this workspace" RAG card (the full-page
       *  version is /w/:workspace/ask). Toggled by the Ask AI button; seeded
       *  with the current search query as its starting question. */}
      {askOpen && workspace ? (
        <div ref={askRef} className="mt-4" data-testid="search-rag-card">
          <AskAiSearch
            workspaceId={workspace.id}
            workspaceSlug={slug}
            initialQuery={q}
            variant="card"
          />
        </div>
      ) : null}

      <div className="mt-5">
        {loading && (
          <p className="inline-flex items-center gap-2 text-sm text-muted-foreground" role="status">
            <Loader2 className="size-4 animate-spin" aria-hidden /> Searching…
          </p>
        )}

        {error !== null && !loading ? (
          error === "unavailable" ? (
            <div className="flex flex-col items-center gap-2 rounded-md border border-border px-4 py-8 text-center" role="alert">
              <ShieldAlert className="size-6 text-muted-foreground" aria-hidden />
              <p className="text-sm text-foreground">Search is temporarily unavailable — try again.</p>
              <p className="text-xs text-muted-foreground">Keep typing to retry — your query is preserved.</p>
            </div>
          ) : (
            <p className="text-sm text-destructive" role="alert">
              Search failed. Check your connection and keep typing to retry.
            </p>
          )
        ) : null}

        {!loading && error === null && q && hits && hits.length === 0 && (
          <p className="flex items-center gap-2 text-sm text-muted-foreground">
            <SearchX className="size-4" aria-hidden />
            No results for “{q}”.
          </p>
        )}
        {!q && !loading && (
          <p className="text-sm text-muted-foreground">
            Type to search this workspace — or press <kbd className="rounded border border-border px-1 text-[10px]">⌘K</kbd> anywhere.
          </p>
        )}

        {hits && hits.length > 0 && error === null ? (
          <div className="mt-4">
            <ResultsList
              items={hits}
              workspaceSlug={slug}
              onActivate={(item) => {
                const link = deepLinkFor(item, slug);
                if (link) router.push(link);
              }}
            />
          </div>
        ) : null}
      </div>
    </div>
  );
}

/** T-155 — result ordering (mirrors the API's `sortBy` enum). */
type SortMode = "relevance" | "createdAt" | "updatedAt";
const SORT_MODES: readonly SortMode[] = ["relevance", "createdAt", "updatedAt"];
function isSortMode(v: string | null): v is SortMode {
  return !!v && (SORT_MODES as readonly string[]).includes(v);
}

type ErrorKind = null | "unavailable" | "generic";

function toErrorKind(e: unknown): ErrorKind {
  if (isApiError(e)) {
    if (e.code === "SEARCH_UNAVAILABLE" || e.status === 503) return "unavailable";
    return "generic";
  }
  return "generic";
}